<script setup>
import config from '@/qly/ext/select'

const props = defineProps({
    modelValue: {
        type: [String, Number, Array],
        default: null
    },
    apiObj: {
        type: Function, default: () => {
        }
    },
    data: {type: Array, default: null},
    params: {type: Object, default: () => ({})},
    defaultValue: {type: Boolean, default: false},
    closeAutoLoad: {type: Boolean, default: false},
    customProps: {type: Object, default: config.props},
    multiple: {type: Boolean, default: false},
    disabled: {type: Boolean, default: false},
    search: {type: Boolean, default: true},
    placeholder: {default: $t('common.pleaseSelect'),},
    clearable: {default: true},
    showIcons: {default: true},
})

const qlySelectRef = ref()

const value = useModel(props, 'modelValue')

const emits = defineEmits(['update:modelValue', 'confirm'])

const confirm = value => {
    emits('confirm', value)
}
const getRemoteData = () => {
    qlySelectRef.value.getRemoteData()
}

defineExpose({
    getRemoteData
})
</script>

<template>
    <view class="bang-select bang-input-base-bgc">
        <qly-select ref="qlySelectRef" v-bind="props" v-model="value" @confirm="confirm" :border="false"
                    :disabled="disabled"/>
    </view>
</template>

<style scoped>
.bang-select:deep(.qly-select) {
    padding-left: 8px;
    padding-right: 3px;
}
</style>
